{% extends 'base.html' %}
{% load static %}
{% block extra_head %}
<!-- font-icon -->
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> -->
<script src='{% static "js/file.js" %}'></script>
<script src='{% static "jquery-3.5.1.min.js" %}'></script>
{% endblock extra_head %}
{% block main %}
{% if user.is_authenticated %}

<div class='container-fluid d-flex'>

  <div class='left mt-2' style='width: 35%'>

    <div class='filezone'>
      {% if not base_path == '/' %}
      <div style="margin-bottom: 10px;">
        <a name='top' href="javascript:" onclick="open_dir(this, '', '/', '2')">back_to_top</a>
      </div>
      <div style="margin-bottom: 10px;">
        <a name='fallback' href="javascript:" onclick="open_dir(this, '', '{{ base_path }}', '2')">...&#47</a>
      </div>
      {% endif %}

      <div class='dir'>
        <ul class='list-group list-group-flush bg-info small m-0 p-0'>
          {% for dir in dirs %}
          <li class='list-group-item '>
            <span id='doc-name'>
              <a style="text-decoration: none;" class='text-primary' name="dir" href="javascript:"
                onclick="open_dir(this, '{{ dir }}', '{{ base_path }}', '2')">{{ dir }}&#47
              </a>
            </span>
          </li>
          {% endfor %}
        </ul>
      </div>

      <hr>
      <!-- style="text-decoration: none;"  -->
      <div class='file'>
        <ul class='mt-0 small files list-group list-group-flush'>
          {% for file, size in files.items %}
          <li class='justify-content-between d-flex ps-3 pe-1 list-group-item'>
            <span class='w-75' id='doc-name'>
              <a style="text-decoration: none;" class='text-success' name="file" href="javascript:"
                onclick="download_file(this, '{{ file }}', '{{ base_path }}', '1')">{{ file }}
              </a>
            </span>
            <div class=' justify-content-right'>
              <span id='size'>{{ size }}</span>
              <a href="javascript:" onclick="play(this, '{{ file }}', '{{ base_path }}', '3')" class='ms-2'>
                <!-- <span class="material-icons">play_circle</span> -->
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-play-circle" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                  <path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445"/>
                </svg>
              </a>
            </div>
          </li>
          {% endfor %}
        </ul>
      </div>

    </div>
  </div>

  <div class='m-1 p-3' style='width:50%'>
    <!-- <div class='mt-10 bg-dark p-10'> -->
    <div class="form-group sticky-top right">
      <textarea class="form-control" id="exampleFormControlTextarea1" id='text' rows="30"></textarea>
    </div>
    <!-- <div class='w-auto card sticky-top right pt-10'> -->
    <!--     <textarea readonly='readonly' id='text' rows='20' cols='120'></textarea> -->
    <!-- </div> -->
  </div>

</div>

{% else %}
{% include "pcs_login.html" %}
{% endif %}
{% endblock %}
